<template>
	<view class="favorite-list">
		<view v-for="course in favorites" :key="course.id" class="favorite-item">
			<image class="list-image" :src="course.image"></image>
			<view class="list-item">
				<text class="item-text">{{ course.name}}</text>
				<view class="list-buttom">
					<text>主讲老师：{{ course.teacher }}</text>
					<view>
						<text class="buttom">￥{{course.price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				favorites: [],
			};
		},
		onLoad(options) {
		    this.loadFavorites();
		    if (options && options.title) {
		      this.title = decodeURIComponent(options.title);
		      // 如果需要根据传入的title查找特定课程
		      this.findCourseByTitle(this.title);
		    }
		  },
		methods: {
			loadFavorites() {
				const favoriteIds = uni.getStorageSync('favorites') || [];
				// 假设有一个课程列表 API
				const allCourses = [{
						id: '01',
						name: 'MySQL基础入门–mysql数据库实战教程',
						image: '/static/image/mysql3.png',
						teacher: '李老师',
						price: 250.00
					},
					{
						id: '02',
						name: '专升本高等数学微积分课程学习',
						image: '/static/image/高等数学.png',
						teacher: '李老师'
					}
				];
				this.favorites = allCourses.filter(course => favoriteIds.includes(course.id));
			},
			 // 根据课程名称查找课程
			    findCourseByTitle(title) {
			      const allCourses = [
			        {
			          id: '01',
			          name: 'MySQL基础入门–mysql数据库实战教程',
			          image: '/static/image/mysql3.png',
			          teacher: '李老师',
			          price: 250.00
			        },
			        {
			          id: '02',
			          name: '专升本高等数学微积分课程学习',
			          image: '/static/image/高等数学.png',
			          teacher: '李老师',
			          price: 180.00
			        }
			      ];
			      
			      // 查找匹配的课程
			      const matchedCourse = allCourses.find(course => 
			        course.name === title || course.name.includes(title)
			      );
				   if (matchedCourse) {
				          // 如果只需要显示匹配的课程，可以这样设置
				          this.favorites = [matchedCourse];
				          
				          // 或者如果你想保留所有收藏但高亮匹配的课程
				          // 可以添加一个isMatched标志
				          this.favorites = this.favorites.map(course => ({
				            ...course,
				            isMatched: course.name === title
				          }));
				        }
		},
		}
	};
</script>

<style lang="scss">
	.favorite-list{
		padding: 10px;
	}
	.favorite-item{
		display: flex;
		width: 100%;
		height: 900px;
		background-color: white;
	}
	.list-image{
		width: 100px;
		height: 100px;
		border: none;
		border-radius: 5px;
	}
	.list-item{
		line-height: 3.5;
		margin-left: 10px;
	}
	.item-text{
		font-size: 15px;
	}
	.list-buttom{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.buttom{
		color: red;
	}
</style>